<template>
  <a-row class="home" :gutter="20">
    <a-col :span="8">
      <a-card hoverable="true">
        <div class="user">
          <img class="avatar" :src="user.avatar" alt="头像" />
          <div class="user-info">
            <p class="name">{{ user.username }}</p>
            <p class="role">{{ user.role }}</p>
          </div>
        </div>
        <div class="login-info">
          <p>
            注册时间：<span>{{ user.createTime }}</span>
          </p>
          <p>
            欢迎回来：<span>{{ user.username }}</span>
          </p>
        </div>
      </a-card>
    </a-col>
    <a-col :span="16">
      <a-row :gutter="20">
        <a-col :span="6">
          <a-card title="统计时间" hoverable="true">
            <field-time-outlined /> &nbsp; {{ ucenter.date }}</a-card
          >
        </a-col>
        <a-col :span="6">
          <a-card title="注册人数" hoverable="true">
            <usergroup-add-outlined /> &nbsp;
            {{ ucenter.registerCount }}
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="对局记录" hoverable="true">
            <user-outlined /> &nbsp;
            {{ ucenter.recordCount }}
          </a-card>
        </a-col>
        <a-col :span="6">
          <a-card title="发布文章" hoverable="true">
            <book-outlined /> &nbsp;
            {{ ucenter.essaysCount }}
          </a-card>
        </a-col>
      </a-row>
      <a-card style="margin-top: 20px">
        <div style="height: 35vh">
          <img
            src="https://img.zcool.cn/community/0156b25b2a647fa8012034f73c0cec.jpeg@1280w_1l_2o_100sh.jpg"
            style="height: 100%"
          />
        </div>
      </a-card>
    </a-col>
    <a-col :span="8" style="margin-top: 20px"> </a-col>
    <a-col :span="16"> </a-col>
  </a-row>
</template>

<script>
import { useStore } from "vuex";
import userApi from "@/apis/userApi";
import { onMounted, reactive } from "vue";
import {
  FieldTimeOutlined,
  UserOutlined,
  UsergroupAddOutlined,
  BookOutlined,
} from "@ant-design/icons-vue";
export default {
  name: "Home",
  components: {
    FieldTimeOutlined,
    UserOutlined,
    UsergroupAddOutlined,
    BookOutlined,
  },
  setup() {
    const store = useStore();

    const user = store.state.user;

    const ucenter = reactive({
      id: "",
      date: "",
      registerCount: "",
      essaysCount: "",
      recordCount: "",
    });

    const statiscs = () => {
      userApi.getYesterDayCount().then((res) => {
        ucenter.id = res.ucenter.id;
        ucenter.date = res.ucenter.date;
        ucenter.registerCount = res.ucenter.registerCount;
        ucenter.essaysCount = res.ucenter.essaysCount;
        ucenter.recordCount = res.ucenter.recordCount;
      });
    };

    onMounted(() => {
      statiscs();
    });

    return {
      user,
      ucenter,
    };
  },
};
</script>

<style scoped>
.user {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ccc;
  margin-bottom: 20px;
  padding-bottom: 20px;
}
.avatar {
  width: 192px;
  height: 108px;
  margin-right: 20px;
  border-radius: 50%;
}
.login-info > p {
  line-height: 30px;
  font-size: 14px;
  color: #999;
}
.login-info span {
  color: #666;
  margin-left: 70px;
}
</style>